import { Divider, Empty, Progress, type ProgressProps } from 'antd'
import './index.css'
import WorkItem from './work-item'
import type { DayWorksProps } from '../../types'
import CreateWorkBtn from './create-work-btn'
import { useDroppable } from "@dnd-kit/core"
import CreateWorkModal, { type WorkModalHandle } from './create-work'
import { useRef } from 'react'
const twoColors: ProgressProps['strokeColor'] = {
    '0%': '#108ee9',
    '100%': '#87d068',
};
const DayWorks = (props: DayWorksProps) => {
    const { data } = props
    const createWorkModalRef = useRef<WorkModalHandle>(null)
    const { isOver, setNodeRef } = useDroppable({
        id: data.id,
    })
    const style = {
        backgroundColor: isOver ? "#f3f5f799" : undefined,
    }
    const create = () => {
        createWorkModalRef.current?.showModal()
    }
    const onEdit = (id: string) => {
        const item = data.items.find((item) => item.id === id)
        if (!item) return
        createWorkModalRef.current?.showModal({
            data: item,
            isEdit: true,
            title: "编辑工作日志",
        })
    }
    return (
        <div className='day-works' style={style} >
            <div className='day-works__header'>
                <div className='day-works__header__desc'>
                    <div className='desc-times'>
                        <span className='pr-2'>{data.title}</span>
                        <span >{data.date}</span>
                    </div>
                    <div className='desc-content '>
                        {
                            '7h 45min'
                        }
                    </div>
                </div>
                <div className='day-works__header__status'>
                    <Progress size='small' showInfo={false} strokeColor={twoColors} percent={50} />
                </div>
                <Divider style={{ borderColor: 'gainsboro' }}><span className='split'>工作日志</span></Divider>
            </div>
            <div className='day-works__body' data-container-id={data.id} ref={setNodeRef}>
                {
                    (data?.items || []).map((d) => (
                        <WorkItem onEdit={onEdit} key={d.id} id={d.id} title={d.title} content={d.content} times={d.times} status={d.status}></WorkItem>
                    ))
                }
                {
                    !data?.items.length && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} className='data-empty' description={<>暂无日志</>} />
                }

            </div>
            <div className='day-works__footer'>
                <CreateWorkBtn onClick={create}></CreateWorkBtn>
            </div>
            <CreateWorkModal ref={createWorkModalRef}></CreateWorkModal>
        </div>
    )
}
export default DayWorks